<template>
  <div class="modal">
    <div class="head_navigat">
      <div class="title">目录管理</div>
      <div class="button-container">
        <div>
          <button @click="onAddItem">添加</button>
        </div>
      </div>
    </div>
    <div class="content">
      <el-table :data="tableData">
        <el-table-column fixed prop="sort" label="章节编号" width="226.18">
          <template v-slot="{ row }">
            {{ row.sort }}
          </template>
        </el-table-column>
        <el-table-column prop="sequence" label="目录名称" width="407.15">
          <template v-slot="{ row }">
            <el-input
              v-model="row.sequence"
              style="width: 360px; height: 50px"
              @input="() => handleInput({ row })"
            />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="章节名称" width="407.15">
          <template v-slot="{ row }">
            <el-input
              v-model="row.title"
              style="width: 360px; height: 50px"
              @input="() => handleInput({ row })"
            />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="130">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="deleteRow(scope.row.id)"
            >
              <img src="/svg/trashCan.svg" />
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 目录管理的内容 -->
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import {
  getDirectoryById,
  updateDirectory,
  delDirectory,
  addDirectory
} from "@/api/directory";
import { useRoute, useRouter } from "vue-router";
import { message } from "@/utils/message";
import { ElMessage } from "element-plus";
import {useDirectoryStore} from "@/store/modules/directory";

const route = useRoute();
const router = useRouter();

const scriptId = ref(0);

const tableData = ref([]);
const directoryStore = useDirectoryStore()

const maxSort = ref(0);
const initDirectory = ref({
  scriptId: 0,
  status: 1,
  sort: maxSort,
  title: "默认标题",
  sequence: "默认目录"
});
const handleInput = ({ row }) => {
  row.scriptId = scriptId.value;
  updateDirectory(row).then(res => {
    if (res.code === "0000") {

    } else {
      message(res.message, {
        type: "error"
      });
    }
  });
};

const deleteRow = (id: number) => {
  initDirectory.value.sort = maxSort.value - 1;
  delDirectory(id).then(res => {
    if (res.code === "0000") {
      tableData.value.splice(id, 1);

    } else {
      message(res.message, {
        type: "error"
      });
    }
    refreshDirectory(scriptId.value);
  });
};
const onAddItem = () => {
  initDirectory.value.sort = maxSort.value + 1;
  initDirectory.value.sequence = "默认目录" + maxSort.value;
  initDirectory.value.title = "默认标题" + maxSort.value;
  addDirectory(initDirectory.value).then(res => {
    if (res.code === "0000") {
      tableData.value.unshift(initDirectory);
    } else {
      ElMessage.error(res.message);
    }
    refreshDirectory(scriptId.value);
  });
};
const refreshDirectory = (scriptId: number) => {
  tableData.value = [];
  getDirectoryById(scriptId).then(res => {
    const directoryList = res.data.list;
    for (let i = 0; i < directoryList.length; i++) {
      tableData.value.push({
        id: directoryList[i].id,
        sort: directoryList[i].sort,
        sequence: directoryList[i].sequence,
        title: directoryList[i].title,
        status: directoryList[i].status
      });
      if (directoryList[i].sort > maxSort.value) {
        maxSort.value = directoryList[i].sort;
      }
    }
    directoryStore.addDirectory(tableData.value);
  });
};
onMounted(() => {
  scriptId.value = Number(route.query.scriptId);
  initDirectory.value.scriptId = scriptId.value;
  if (!scriptId.value) {
    router.push("/error/404");
  } else {
    refreshDirectory(scriptId.value);
  }
});
const save = () => {
  // alert("保存成功")
  //   保存到pinia 里面
};
</script>
<style>
.elUploadContainer {
  border: #0bdcb7 0px solid;
  background-color: #232323;
  border-radius: 10px;
  width: 360px;
  height: 50px;
  justify-content: space-between;

  .el-upload-list {
    padding-top: 30px;
    color: white;
  }

  .upload-button-container {
    padding-left: 250px;
    padding-top: 7px;
  }
}

.el-upload-list__item {
  width: 200px;
}

.el-table {
  height: 627.49px;
  background-color: #383838;
}

.el-table__header {
  width: 1170px !important;
  background-color: #383838 !important;
}
</style>

<style scoped>
.modal {
  /* 样式 */
  width: 1170px;
  height: 707.39px;

  .head_navigat {
    height: 80px;
    width: 1170px;
    background-color: #525252;
    display: flex;
    padding-top: 24px;
    padding-bottom: 25px;

    .title {
      font-size: 22px;
      font-weight: 50;
      padding-left: 540.28px;
    }

    .button-container {
      padding-left: 200px;
      display: flex;

      button {
        width: 100px;
        height: 40px;
        background-color: #232323;
        font-size: 16.18px;
        font-weight: 500;
        line-height: 24.27px;
        border-radius: 7px;
      }

      .saveButton {
        padding-left: 20px;

        button {
          background-color: #fc8b1a;
        }

        width: 100px;
        height: 40px;
        font-size: 16.18px;
        font-weight: 500;
        line-height: 24.27px;
        border-radius: 7px;
        color: black;
      }

      .exitIcon {
        padding-left: 55px;
        padding-top: 3px;
      }
    }
  }

  .content {
    height: 627.04px;
    background-color: #383838;
    display: flex;
    overflow: auto;
  }
}
</style>
